<!-- 推荐页面 -->
<template>
    <view>
        <!-- 搜索组件 -->
        <search></search>
        <!-- 海报布局 -->
        <view class="box-poster">
            <swiper circular autoplay indicator-dots indicator-color="rgb(255, 255, 255)"
                indicator-active-color="rgb(0, 0, 0)">
                <swiper-item v-for="item in posters" :key="item._id">
                    <image mode="aspectFill" :src="item.picurl" @click="onPoster(item)"></image>
                </swiper-item>
            </swiper>
        </view>
        <!-- 公告布局 -->
        <view class="box-notice">
            <!-- 公告左侧布局 -->
            <view class="box-flex-center-x">
                <uni-icons type="sound" size="30"></uni-icons>
                <view>公告</view>
            </view>
            <!-- 公告右侧布局 -->
            <view class="box-notice-right">
                <swiper circular autoplay vertical>
                    <swiper-item v-for="item in notices" :key="item.id">
                        <view class="box-notice-right-item-content" @click="onNotice(item)">{{item.title}}</view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <!-- 每日推荐布局 -->
        <view class="box-recommend">
            <!-- 标题组件 -->
            <custom-title>
                <!-- 左侧插槽 -->
                <template #left>每日推荐</template>
                <!-- 右侧插槽 -->
                <template #right>
                    <view class="box-flex-center">
                        <uni-icons type="calendar" size="30"></uni-icons>
                        <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
                    </view>
                </template>
            </custom-title>
            <!-- 每日推荐内容布局 -->
            <view class="box-recommend-content">
                <scroll-view scroll-x>
                    <view class="box-recommend-content-item" v-for="item in recommends" :key="item._id">
                        <image mode="aspectFill" :src="item.smallPicurl" @click="onRecommend(item._id)"></image>
                    </view>
                </scroll-view>
            </view>
        </view>
        <!-- 专题精选布局 -->
        <view class="box-subject">
            <!-- 标题组件 -->
            <custom-title>
                <!-- 左侧插槽 -->
                <template #left>专题精选</template>
                <!-- 右侧插槽 -->
                <template #right>
                    <view @click="onSubjectMore">更多</view>
                </template>
            </custom-title>
            <!-- 专题精选内容布局 -->
            <view class="box-subject-content box-grid-3">
                <!-- 专题组件 -->
                <subject v-for="item in subjects" :key="item._id" :data="item"></subject>
                <!-- 专题组件 -->
                <subject :isMore="true"></subject>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    //导入
    import { ref } from "vue";
    import { onPullDownRefresh } from "@dcloudio/uni-app";
    import { navigateTo, reLaunch, navigateToMiniProgram } from "@/utils/uni-api.ts";
    import { url_subject, url_subject_detail, url_notice_detail, url_image_detail } from "@/utils/url.ts";
    import { api_getPoster, api_getRecommend, api_getSubject } from "@/api/api.ts";

    //参数
    //海报
    let posters = ref([]);
    //公告
    let notices = ref([
        { "id": "1", "title": "公告一，后面内容是为了测试显示不全的情况" },
        { "id": "2", "title": "公告二" }
    ]);
    //每日推荐
    let recommends = ref([]);
    //专题精选
    let subjects = ref([]);

    //初始方法执行
    getPoster();
    getRecommend();
    getSubject();

    //内部事件
    //点击海报
    function onPoster(obj : any = {}) {
        let { url, appid } = obj;
        if (appid) {
            navigateToMiniProgram({ appId: appid, url: url });
        } else {
            navigateTo({ url: url_subject_detail + "?" + url });
        };
    };
    //点击公告
    function onNotice(obj : any = {}) {
        let { id, title } = obj;
        navigateTo({ url: url_notice_detail + "?id=" + id + "&title=" + title });
    };
    //点击每日推荐
    function onRecommend(wallpaperId : string) {
        uni.setStorageSync("subjectDetails", recommends.value);
        navigateTo({ url: url_image_detail + "?id=" + wallpaperId });
    };
    //点击专题精选更多
    function onSubjectMore() {
        reLaunch({ url: url_subject });
    };

    //页面生命周期
    //下拉刷新
    onPullDownRefresh(() => {
        getPoster();
        getRecommend();
        getSubject();

        setTimeout(() => {
            uni.stopPullDownRefresh();
        }, 1000);
    });

    //网络请求
    //获取海报
    async function getPoster() {
        let res : any = await api_getPoster();
        posters.value = res.data;
    };
    //获取每日推荐
    async function getRecommend() {
        let res : any = await api_getRecommend();
        recommends.value = res.data;
    };
    //获取专题精选
    async function getSubject() {
        let res : any = await api_getSubject({
            "select": true
        });
        subjects.value = res.data;
    };
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-poster {
        width: 750rpx;
        padding: 30rpx 0;

        swiper {
            width: 100%;
            height: 340rpx;

            swiper-item {
                width: 100%;
                height: 100%;
                padding: 0 30rpx;
                box-sizing: border-box;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
            }
        }
    }

    .box-notice {
        line-height: 80rpx;
        padding: 0 30rpx;
        display: flex;

        .box-notice-right {
            flex: 1;
            padding-left: 10rpx;

            swiper {
                height: 100%;

                swiper-item {
                    height: 100%;

                    .box-notice-right-item-content {
                        height: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }

    .box-recommend {
        .box-recommend-content {
            padding: 0 30rpx;

            scroll-view {
                white-space: nowrap;

                .box-recommend-content-item {
                    width: 200rpx;
                    margin-right: 10rpx;
                    display: inline-block;
                    border-radius: 10rpx;
                    overflow: hidden;

                    image {
                        width: 100%;
                    }
                }

                .box-recommend-content-item:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .box-subject {
        .box-subject-content {
            padding: 0 30rpx;
        }
    }
</style>